// 创建slice对象
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

// 这个对象是一个可以监听异步的对象.通过也是一个异步的actionCreator
export const asyncCount = createAsyncThunk('async', () => {
  // 这个回调函数中要求必须返回promise
  return new Promise((resolve, reject) => {
    // 执行操作
    setTimeout(() => {
      resolve(168)
    }, 1000)
  })
})

// 返回值就是slice对象
const zsSlice = createSlice({
  name: 'xxx', // slice的名称.未来会成为需求对象里面type属性的一部分
  initialState: { count: 0 }, // 配置初始数据
  // 这个是同步修改数据的代码
  reducers: {
    // 这两个函数,既是reducer中的case. 也是actionCreator的函数名
    add(state, action) {
      console.log(state, action)
      // 修改数据
      // 注意: 老版本的redux中state数据是不可以被直接修改的.如果要改数据,需要在reducer中通过返回值进行覆盖.但是新版中这个state可以直接被赋值修改.原因是因为这个state根本就不是store中真正存储的数据.这个state其实是store中数据的一个代理.
      state.count += action.payload
    },
    sub(state, action) {
      state.count -= action.payload
    },
  },
  // 配置异步操作数据的代码
  extraReducers(builder) {
    // builder.addCase(asyncCount.pending, (state, action) => {
    //   console.log('正在异步操作')
    // })
    builder.addCase(asyncCount.fulfilled, (state, action) => {
      //   console.log('成功', state, action)
      console.log(state, action)
      state.count = action.payload
    })
    // builder.addCase(asyncCount.rejected, (state, action) => {
    //   console.log('失败')
    // })
  },
})

export default zsSlice
